<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: '100%', height: '500px' }"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { apiGetVisitorsAndPublish } from "../../apis/userApi";
import { onMounted } from "vue";

onMounted(() => {
  apiGetVisitorsAndPublish().then((res) => {
    const dateList = res.date;
    const valueList = res.visitor;
    let totel = 0;
    const valueTotel = res.visitor.map((i)=>{
        return totel+=i;
    })
    const option = {
      // Make gradient line here
      visualMap: [
        {
          show: false,
          type: "continuous",
          seriesIndex: 0,
          min: 0,
          max: 400,
        },
        {
          show: false,
          type: "continuous",
          seriesIndex: 1,
          dimension: 0,
          min: 0,
          max: dateList.length - 1,
        },
      ],
      title: [
        {
          left: "center",
          text: "日访问量",
        },
        {
          top: "50%",
          left: "center",
          text: "总访问量",
        },
      ],
      tooltip: {
        trigger: "axis",
      },
      xAxis: [
        {
          data: dateList,
        },
        {
          data: dateList,
          gridIndex: 1,
        },
      ],
      yAxis: [
        {},
        {
          gridIndex: 1,
        },
      ],
      grid: [
        {
          bottom: "60%",
        },
        {
          top: "60%",
        },
      ],
      series: [
        {
          type: "line",
          showSymbol: false,
          data: valueList,
        },
        {
          type: "line",
          showSymbol: false,
          data: valueTotel,
          xAxisIndex: 1,
          yAxisIndex: 1,
        },
      ],
    };
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      VisualMapComponent,
      LineChart,
      CanvasRenderer,
      UniversalTransition,
    ]);
    const chartDom = document.getElementById("myEcharts");
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
  });
});
</script>
